<template>
    <vue-json-editor
         v-model="gameData" 
         :showBtns="false"  
         lang="zh"  
         @json-change="onJsonChange"  
         @json-save="onJsonSave"  
        />
</template>
<script>
import { getDataGame } from '../api';
import vueJsonEditor from 'vue-json-editor'
export default {
    components: { vueJsonEditor },
    data() {
        return {
            gameData: [
                {"a": 2,"b": 1,"c":["11","aa"]}
            ]
        }
    },
    // 获取数据
    mounted() {
        getDataGame().then(({ data }) => {
            console.log(data)
            let {gameData} = data.data
            this.gameData = recursionGenerateTree(0, gameData)
            console.log(this.gameData)
        })
    },
    methods: {
        // 编辑内容变化
        onJsonChange(value) {
            console.log('value:', value); 
        },
        // 编辑内容保存
        onJsonSave(value) {
            console.log('value:', value);
        },
    }
}

// 递归函数
// function recursionGenerateTree(pid, arr) {
//     let array = []
//     arr.forEach(item => {
//         if (item.pid === pid) {
//             item.children = recursionGenerateTree(item.id, arr) // 接收子节点
//             array.push(item)
//         };
//     })
//     return array // 返回查找到的节点
// }

// function recursionGenerateTree(pid, arr) {
//     let array = []
//     arr.forEach(item => {
//         let newitem ={}
//         if (item.pid === pid) {
//             array[item.key]=item.value
//             newitem.children = recursionGenerateTree(item.id, arr) // 接收子节点
//             array.push(newitem)
//         }
//     })
//     return array // 返回查找到的节点
// }
function recursionGenerateTree(pid, arr) {
    let newobj = {}

    arr.forEach(item => {
        if (item.pid === pid) {
            item.chirden = recursionGenerateTree(item.id, arr) // 接收子节点
            console.log(item.chirden);
            newobj[item.key] = item.value
            // if(JSON.stringify(item.chirden)!="{}") 
            newobj.chirden = item.chirden
        }
    })
    return newobj // 返回查找到的节点
}



</script>
<style scoped lang="less">

</style>